<template>
  <div class="mod-prod-sku-table">
    <div v-for="(subItem,subIndex) in list" :key="subIndex+'sub'">
      <div>{{ subItem.zsl }}</div>
      <el-form label-width="100px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="阿贝数vd">
              <el-input v-model="subItem.abs" placeholder="请输入阿贝数" style="width:130px" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="透射比">
              <el-input v-model="subItem.tsb" placeholder="请输入透射比" style="width:130px" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="隐形标记">
              <el-input v-model="subItem.yxbj" placeholder="请输入隐形标记" style="width:130px" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="是否球面">
              <!-- <el-radio v-model="subItem.qmbj" label="0">未标记</el-radio> -->
              <el-radio v-model="subItem.qmbj" :label="1">球面</el-radio>
              <el-radio v-model="subItem.qmbj" :label="2">非球面</el-radio>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="是否定制">
              <el-checkbox-group v-model="subItem.dzlxs">
                <el-checkbox :label="1">现片</el-checkbox>
                <el-checkbox :label="2">车房定制</el-checkbox>
              </el-checkbox-group>
              <el-button @click="membraneBtn(subIndex)">点击设置</el-button>
            </el-form-item>
          </el-col>

          <el-col :span="8" />
        </el-row>

      </el-form>
    </div>
    <MembraneInit ref="membraneInit" @dzlxsBack="dzlxsBack" />
  </div>
</template>

<script>

import MembraneInit from './membrane-init.vue'
export default {
  components: {
    MembraneInit
  },
  props: {
    tableValue: {
      default: () => {
        return []
      },
      type: Array
    }
  },
  data() {
    return {
      list: this.tableValue
    }
  },
  watch: {
    tableValue(val) {
      this.list = val
    }
  },
  methods: {
    membraneBtn(subIndex) {
      const data = this.list[subIndex]
      this.$refs.membraneInit.openDialog(data, subIndex)
    },
    dzlxsBack(data, zIndex) {
      this.list[zIndex].dz = data.dz
      this.list[zIndex].xp = data.xp
    }
  }
}
</script>

<style lang="scss">

  .mod-prod-sku-table{
    .pic-uploader-component .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      .pic-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 120px;
        height: 120px;
        line-height: 120px;
        text-align: center;
      }
      .pic {
        width: 120px;
        height: 120px;
        display: block;
      }
    }
    .pic-uploader-component .el-upload:hover {
      border-color: #409EFF;
    }
  }
</style>
